VChart 2.0.19
Tutorials
Contributing
Options
API
FAQ
Themes 🌼
Changelogs
Online Customization
Playground
VChart Story Teller

Not only an out-of-the-box multi-terminal chart library, but also a vivid and flexible data storyteller.

VTable Checkered Artist

Not only a high-performance multi-dimensional data analysis form, but also a grid artist created between rows and columns.

VGrammar Data Magician

It is not only a visual grammar that generates thousands of charts, but also a data magician who turns boring into magic.

VRender Visual Rendering

Not only a visual rendering engine with rich functions, but also a handy pen.

VMind Smart Visualization Suit

Not just automatic, but also fantastic.

VStory Data Story Framework

Intelligent visual storytelling, data story creation framework.

VSeed Data Seed

VSeed, an elegant data composer, transforming complexity into simplicity.

!!!###!!!title=134-How does the Ring with Indicator Card dynamically update indicator values——VisActor/VChart FAQ documents!!!###!!!

How does the Ring with Indicator Card dynamically update indicator values?

Question Description

Something like (https://www.visactor.io/vchart/demo/pie-chart/pie-indicator) for a ring with indicator cards.

The value in this metrics card is now user-defined and does not support automatic changes, but it is possible to update this value after calculation. Can this number in the metrics card be changed according to the sector of the hover? How to do it?

Solution

The solution is different for different charting libraries. According to the demo you gave, you only need to set the interaction trigger type and configure the text field content.

  • indicator.trigger is used to set the interaction trigger type. The available interaction types are hover, select, none, the default interaction trigger type is select, according to your requirement, you need to set indicator.trigger to hover.
  • indicator.title.style.text is used to set the text content and supports callback. You can configure the required fields in the text according to the required data fields and format the presentation according to your needs.

Code Example

Results

Quote